﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.Appointments.ManualAppoint.IndexModel
@inject IPageLayout PageLayout
@await Component.InvokeAsync("PoolWidget")
@await Component.InvokeAsync("PoolBoxWidget")
@await Component.InvokeAsync("DeviceSelectorWidget")
@await Component.InvokeAsync("ApplyFormWidget")
@{
    PageLayout.Content.Title = "患者预约";
}
@section scripts
{
    <abp-script src="/js/dayjs/dayjs.min.js"></abp-script>
    <abp-script src="/Pages/Appointments/ManualAppoint/Index.cshtml.js"></abp-script>
}
@section styles
{
    <abp-style src="/Pages/Appointments/ManualAppoint/Index.css"></abp-style>
}
<div class="content-container">
    <div id="app">
        <!--顶部-->
        <!--查询、高级查询-->
        <div class="filter-form-container headercontainer">
            <!--搜索栏-->
            <el-form :label-width="formLabelWidth" ref="quick-query-form">
                <el-row>
                    <el-col :span="6">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label-width="0">
                                <el-select class="select-apply-dep" placeholder="选择申请科室" v-model="userData.applyDepartments" size="mini" multiple clearable>
                                    <el-option v-for="item in applyDepartmentOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6" style="margin-left:5px;">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label-width="0">
                                <el-input v-model.trim="number" placeholder="请输入编号" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="9" style="margin-left:5px;">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label-width="0">
                                <el-button icon="el-icon-search" type="primary" v-on:click="search" size="mini">查询</el-button>
                                <el-button icon="el-icon-search"  v-on:click="clearSearch" size="mini">重置</el-button>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <!--高级查询折叠面板-->
            <el-form  :label-width="formLabelWidth" ref="advance-query-form" >
                <el-collapse accordion value="advanceSearch" v-on:change="clickCollapseHandler">
                    <el-collapse-item  name ="advanceSearch"  title="高级搜索">
                        <div class="advance-search-container">
                            <el-row>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="姓名">
                                            <el-input v-model.trim="userData.name" size="mini" autocomplete="off" clearable></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="联系方式">
                                            <el-input v-model.trim="userData.phoneNumber" size="mini" autocomplete="off" clearable></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="证件号码">
                                            <el-input v-model.trim="userData.idCardNumber" size="mini" autocomplete="off" clearable></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="医保卡号">
                                            <el-input v-model.trim="userData.medicalInsuranceNumber" size="mini" autocomplete="off" clearable></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="就诊卡号">
                                            <el-input v-model.trim="userData.medicalCardNumber" size="mini" autocomplete="off" clearable></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="门诊号">
                                            <el-input v-model.trim="userData.outPatientNumber" size="mini" autocomplete="off" clearable></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="住院号">
                                            <el-input v-model.trim="userData.inPatientNumber" size="mini" autocomplete="off" clearable></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="体检号">
                                            <el-input v-model.trim="userData.physicalExamNumber" size="mini" autocomplete="off" clearable></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="申请单号">
                                            <el-input v-model.trim="userData.applyNumber" size="mini" autocomplete="off" clearable></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="18">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="申请时间">
                                            <el-tag v-for="(item,index) in timeRangeOptions"
                                                    type="info"
                                                    :key="item.index+item.value"
                                                    :effect="index===selectedRangeIndex?'dark':'plain'"
                                                    v-on:click="rangeTagClicked(index,item)"
                                                    style="margin-left:15px;"
                                                    size="mini">
                                                {{ item.label }}   
                                            </el-tag>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="18">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="日期范围">
                                            <el-date-picker v-model="userData.applyTimeRange"
                                                            type="datetimerange"
                                                            size="mini"
                                                            ref="dateRangePicker"
                                                            align="left"
                                                            format="yyyy-MM-dd "
                                                            value-format="yyyy-MM-dd HH:mm:ss"
                                                            start-placeholder="开始日期"
                                                            end-placeholder="结束日期"
                                                            :disabled="dateTimePickerDisable"
                                                            :default-time="['00:00:00', '23:59:59']">
                                            </el-date-picker>
                                        </el-form-item>
                                    </div>
                                </el-col>
                               
                            </el-row>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </el-form>
        </div>
        <div class="body-container">
            <div class="body-left">
                <!--申请项目-->
                <div class="apply-item-contianer">
                    <div class="toolbar-container">
                        <div class="un-apppoint-toolbar" v-if="activeTabName==='noAppoints' ">
                            <div class="selected-count">
                                <span>已选<span style="color:#409EFF">{{selectedNoAppointRows.length}}</span>  项</span>
                            </div>
                            <div class="button-container">
                                <div><el-button size="mini" type="primary" plain v-on:click="submit">预约</el-button></div>
                            </div>
                        </div>
                        <div class="appointed-toolbar" v-else>
                            <div class="selected-count">
                                <span>已选 {{selectedAppointedRows.length}} 项</span>
                            </div>
                            <div class="button-container">
                                <el-button size="mini" type="primary" plain v-on:click="submitEdit">修改</el-button>
                                <el-button size="mini" type="primary" plain v-on:click="cancel" v-show="showCancel">取消</el-button>
                            </div>
                        </div>
                    </div>
                    <el-tabs style="height:100%;border:none;" v-on:tab-click="tabClickedhandler" v-model="activeTabName">
                        <el-tab-pane name="noAppoints">
                            <span slot="label"><el-badge  type="info" :value="noAppoints.length" class="sdsads">未预约</el-badge></span>
                            <el-table :data="noAppoints"
                                      empty-text="无检查申请"
                                     @*  :height="tableHeight" *@
                                      size="mini" 
                                      class="el-table" 
                                      row-key="id" 
                                      @* v-on:row-click="noApppointRowClick" *@
                                      ref="noAppoint" 
                                      highlight-selection-row
                                      highlight-current-row
                                      v-loading="noAppointLoading"
                                      element-loading-text="拼命加载中"
                                      element-loading-spinner="el-icon-loading"
                                      element-loading-background="rgba(0, 0, 0, 0.8)"
                                      v-on:selection-change="noAppointSelectedChange"
                                      style="height:100%;">
                                <el-table-column type="selection" 
                                                 :selectable="getNSelectable"
                                                 :reserve-selection="reserveSelectionNoAppoint">
                                </el-table-column>
                                <el-table-column label="申请项目"  width="130" property="examItemName" >

                                </el-table-column>
                                <el-table-column label="姓名" width="70" property="name">

                                </el-table-column>
                                <el-table-column label="设备类型" width="80" property="deviceTypeName">

                                </el-table-column>
                                <el-table-column label="预约信息" width="250" >
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.edited" style="color:#409EFF">{{scope.row.appointment}}</span>
                                        <span v-else style="color:#909399">无</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="项目编号" width="100" property="examItemNumber">

                                </el-table-column>
                                <el-table-column label="申请单号" width="100" property="applyNumber">

                                </el-table-column>
                                <el-table-column label="申请时间" width="100" property="applyTime">

                                </el-table-column>
                                <el-table-column label="项目费用" width="80" property="examItemFee">

                                </el-table-column>
                               @*  <el-table-column label="操作"  fixed="right">
                                    <template slot-scope="scope">
                                        <el-button size="mini" icon="el-icon-edit" v-on:click="showEdit(scope.row.id)" ></el-button>
                                    </template>
                                </el-table-column> *@
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane name="appointeds">
                            <span slot="label"><el-badge  type="success" :value="appointeds.length" class="dadadad"> 已预约 </el-badge></span>
                            <el-table :data="appointeds" 
                                      empty-text="暂无已预约项目" 
                                      size="mini"
                                     @*  :height="tableHeight" *@
                                      class="el-table" 
                                      row-key="id"
                                      @* v-on:row-click="apppointedRowClick" *@
                                      ref="appointed"
                                      highlight-selection-row
                                      highlight-current-row
                                      :v-loading="appointedLoading"
                                      element-loading-text="拼命加载中"
                                      element-loading-spinner="el-icon-loading"
                                      element-loading-background="rgba(0, 0, 0, 0.8)"
                                      v-on:selection-change="appointedSelectedChange"
                                      style="height:100%;">
                                <el-table-column type="selection" 
                                                 :selectable="getSelectable"
                                                 :reserve-selection="reserveSelectionAppointed">
                                </el-table-column>
                                <el-table-column label="预约编号" width="110" property="appointmentNumber">

                                </el-table-column>
                                <el-table-column label="姓名" width="70" property="name">

                                </el-table-column>
                                <el-table-column label="申请项目" width="130" property="examItemName">

                                </el-table-column>
                                <el-table-column label="预约状态" width="70">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.appointmentStatus==0" style="color:#F56C6C">未确认</span>
                                        <span v-else-if="scope.row.appointmentStatus==1">未签到</span>
                                        <span v-else style="color:#67C23A">已签到</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="设备类型" width="80" property="deviceTypeName">
                                        
                                </el-table-column>
                                <el-table-column label="预约信息" width="200">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.edited" style="color:#409EFF">{{scope.row.appointment}}</span>
                                        <span v-else>{{scope.row.appointment}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="申请单号" width="100" property="applyNumber">

                                </el-table-column>
                                <el-table-column label="开单时间" width="100" property="applyTime">

                                </el-table-column>
                                <el-table-column label="项目费用" width="80" property="examItemFee">

                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <!--申请单信息-->
                @* <div class="apply-info-container">
                    <apply-form :selected-items="selectedApplyForms">
                    </apply-form>
                </div> *@
            </div>
            <div class="body-right" ref="body-right">
                 
                 <div class="device-list">
                     <!-- 设备列表vue 组件 -->
                    <device-selector v-model="deviceId" :device-type-id="deviceTypeId">

                    </device-selector>
                 </div>
                 <div class="date-picker-container">
                    <el-date-picker style="width:100%;" v-model="date"
                                    align="center"
                                    size="min"
                                    type="date"
                                    placeholder="选择预约日期"
                                    :picker-options="pickerOptions">
                    </el-date-picker>
                 </div>
                 <div class="pool-box-container">
                    <pool-box :date="date" v-on:pool-selected="poolSelectedHandler" :selected-id="selectedPoolId" ref="pool-box" :device-id="deviceId">

                     </pool-box>
                 </div>
            </div>
        </div>
    </div>
</div>
